<template>
  <div>
    <div class="title">
      <el-col :span="1" style="width: 50px;">
        <span style="color:#757575;">位置 :</span>
      </el-col>
      <el-col :span="20">
        <span @click="tableshow" class="hand" :class="{'textactive' : !secondshow}">{{title}}</span>
        <span v-if="secondshow" :class="{'textactive' : secondshow}">> {{secondtitle}}</span>
      </el-col>
    </div>
    <div class="cust" v-if="!show">
      
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <div style="margin-top:30px;margin-left:20px;float: left;">
              <el-switch
                style="display: block"
                v-model="svalue"
                active-color="#13ce66"
                inactive-color="#4e87dc"
                active-text="组织"
                inactive-text="Team">
              </el-switch>
          </div>
          <div  style="margin-bottom:20px;float: right;">
            <el-row type="flex" justify="space-between" style="margin-top: 11px;" class="btn">
                <el-input
                  style="width: 136px;margin-right: 5px;"
                  size="small"
                  placeholder="请输入内容"
                  @keyup.enter.native="search"
                  v-model.trim="searchword"
                >
                  <i
                    slot="suffix"
                    class="el-input__icon el-icon-search"
                    style="cursor: pointer;"
                    @click="search"
                  ></i>
                </el-input>
              
                <el-button
                  class="add"
                  :class="{'active' : newcolor}"
                  size="small"
                  @mousedown.native="adddown"
                  @mouseup.native="addup"
                  @click="addshow"
                  round
                >新增</el-button>
                <el-button
                  class="edit"
                  @mousedown.native="editdown"
                  @mouseup.native="editup"
                  @click="edit"
                  :class="{'active1' : newcolor1}"
                  size="small"
                  round
                >修改</el-button>
                <el-button
                  class="delete"
                  @mousedown.native="deletedown"
                  @mouseup.native="deleteup"
                  @click="deletedata"
                  :class="{'active2' : newcolor2}"
                  size="small"
                  round
                >删除</el-button>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-row>
            <el-col style="width: 272px;margin-right: 15px;">
              <!-- 组织结构 -->
              <div class="tree" v-if="svalue ==true">
                <el-input placeholder="查找" v-model="filterText"></el-input>
                <el-tree
                  class="filter-tree treetest"
                  :data="data2"
                  :props="defaultProps"
                  default-expand-all
                  :filter-node-method="filterNode"
                  :show-checkbox="true"
                  :highlight-current="true"
                  :expand-on-click-node="true"
                  @check-change="handleCurrentNode"
                  ref="tree2"
                ></el-tree>
              </div>
            </el-col>

            <el-col style="width: 272px;margin-right: 15px;">
              <!-- Team结构 -->
              <div class="tree" v-if="svalue ==false">
                <el-input placeholder="查找" v-model="filterText"></el-input>
                <el-tree
                  class="filter-tree treetest"
                  :data="data3"
                  :props="props"
                  default-expand-all
                  :filter-node-method="filterNode"
                  :show-checkbox="true"
                  :highlight-current="true"
                  :expand-on-click-node="true"
                  @check-change="handleCurrentNode"
                  ref="tree3"
                ></el-tree>
              </div>
            </el-col>
            <!-- 员工信息 -->
            <el-col  class="posttable custtable">
              <el-table
                ref="singleTable"
                highlight-current-row
                :data="tableData"
                @current-change="handleCurrentChange"
              >
                <el-table-column label="员工工号">
                  <template slot-scope="scope">
                    <span style="color: #757575;">{{scope.row.empno}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="eoss账号">
                  <template slot-scope="scope">
                    <span
                      style="color: #1198ff;cursor:pointer;"
                      @click="viewdetail(scope.row)"
                    >{{scope.row.username}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="用户姓名"></el-table-column>
                <el-table-column prop="sysRoles" label="用户角色"></el-table-column>
                <el-table-column prop="roleLevel" label="用户级别"></el-table-column>
                <el-table-column prop="phone" label="联系电话"></el-table-column>
                <el-table-column prop="email" label="公司邮件"></el-table-column>
                <el-table-column prop="sinoEmail" label="新桥邮件"></el-table-column>
              </el-table>

              <div class="pager">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="pagehandleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5,10,15]"
                  :page-size="pagesize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalcount"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-dialog
        title="删除用户"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="deleteClose"
        class="deletedialog"
      >
        <div style="text-align: center">
          <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
            <span style="font-size: 16px;color: #333;margin-left: 12px;">确定删除该用户吗？</span>
          </i>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="sure" round @click="delPost">确 定</el-button>
          <el-button round @click="deleteClose" class="cancel">取 消</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="错误"
        :visible.sync="editdialogVisible"
        width="30%"
        :before-close="handleClose"
        class="deletedialog"
      >
        <div style="text-align: center">
          <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
            <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何用户</span>
          </i>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="sure" round @click="handleClose">确 定</el-button>
          <el-button round @click="handleClose" class="cancel">取 消</el-button>
        </span>
      </el-dialog>
    </div>
    <div v-if="type == 1">
      <add-user ref="userAdd" @hide="hideShow" @success="postSucess" v-if="show"></add-user>
    </div>
    <div v-if="type == 2">
      <cust-edit ref="custEdit" :current-data="currentRow" v-if="addShow" @success="postSucess" @hide="hideShow"></cust-edit>
    </div>
    <div v-if="type == 3">
      <user-detail v-if="addShow" :detail-data="detaildata"></user-detail>
    </div>
  </div>
</template>
<script>
import AddUser from "./adduser.vue";
import UserDetail from "./userdetail.vue";
import CustEdit from "./custedit.vue";
import axios from "axios";
import qs from "qs";

export default {
  name: "custmanage",
  data() {
    return {
      filterText: "",
      filterTeam: "",
      svalue:true,
      isShow:false,
      data2: [],
      data3: [],
      defaultProps: {
        children: "childCompany",
        label: "name"
      },
      props:{
        children: "childTeam",
        label: "name"//与后台字段相同
      },
      tableData: [],
      currentPage: 1,
      pagesize: 15,
      checkedIdArr: [],
      totalcount: null,
      currentRow: null,
      searchword: "",
      secondtitle: "",
      title: "用户管理",
      newcolor: false,
      detaildata: {},
      secondshow: false,
      addShow: false,
      newcolor1: false,
      newcolor2: false,
      dialogVisible: false,
      editdialogVisible: false,
      type: null,
      show: false
    };
  },
  created() {
    this.success();
    axios.get(this.url + "/sysuser/selectUserCompany").then(res => {
      this.unlogin(res.data.code);
      if (res.data.code == 200) {
        this.data2 = res.data.data;
        console.log(res.data.data);
        // alert(this.data2);
      }
    });
    axios.get(this.url + "/sysuser/selectCompanyTeam").then(res => {
      this.unlogin(res.data.code);
      if (res.data.code == 200) {
        console.log(res.data.data);
        this.data3 = res.data.data;
        // alert(this.data3);
      }
    });
  },
  methods: {
    success() {
      axios.post(this.url + "/sysuser/selectUser",{
        condition: this.searchword,
        pageNum: this.currentPage,
        pageSize: this.pagesize
      }).then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          for(let i = 0, len = res.data.data.list.length; i <len; i++){
            if(res.data.data.list[i].sysRoles.length > 1){
              res.data.data.list[i].sysRoles = res.data.data.list[i].sysRoles.join("，")
            }
            if(res.data.data.list[i].roleLevel !== null){
              if(res.data.data.list[i].roleLevel.length > 1 ){
                res.data.data.list[i].roleLevel = res.data.data.list[i].roleLevel.join("，")
              }
            }
          }
          this.tableData = res.data.data.list;
          this.totalcount = res.data.data.total;
          this.type = null;
          this.currentRow = null;
        }
      });
    },
    tableshow(row) {
      this.addShow = false;
      this.secondshow = false;
      this.show = false;
      if (this.$refs.userAdd) {
        this.$refs.userAdd.initdata();
      }
      if (this.$refs.custEdit) {
        this.$refs.custEdit.initdata();
      }
      this.type = null;
      this.$nextTick(() => {
        this.$refs.singleTable.setCurrentRow(row);
        this.currentRow = null;
      })
    },
    handleClose(done) {
      this.editdialogVisible = false;
      document.documentElement.style.overflow='auto';
    },
    deleteClose() {
      this.dialogVisible = false;
      document.documentElement.style.overflow='auto';
    },
    search() {
      this.currentPage = 1;
      axios
        .post(
          this.url + "/sysuser/selectUser",
          {
            condition: this.searchword,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          }
        )
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            if(res.data.data.list.length < 1){
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
            }else{
             for(let i = 0, len = res.data.data.list.length; i <len; i++){
               res.data.data.list[i].sysRoles = res.data.data.list[i].sysRoles.join("，")
            }
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;

            }

          }
        });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.success();
    },
    pagehandleCurrentChange(val) {
      this.currentPage = val;
      this.success();
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    handleCurrentNode(obj, checked, sonChecked) {
      this.currentPage = 1;
      if (checked) {
        this.checkedIdArr.push(obj.id);
      } else {
        for (let i = 0, len = this.checkedIdArr.length; i < len; i++) {
          if (this.checkedIdArr[i] == obj.id) {
            this.checkedIdArr.splice(i, 1);
          }
        }
      }
      axios.post(this.url + "/sysuser/selectUser",{
        id:this.checkedIdArr,
        pageNum: this.currentPage,
        pageSize: this.pagesize
      }).then(res =>{
        if(res.data.code == 200){
          for(let i = 0, len = res.data.data.list.length; i <len; i++){
            res.data.data.list[i].sysRoles = res.data.data.list[i].sysRoles.join("，")
          }
          this.tableData = res.data.data.list;
          this.totalcount = res.data.data.total;
        }
      })
    },
    adddown() {
      this.newcolor = true;
    },
    addup() {
      this.newcolor = false;
    },
    addshow() {
      this.show = !this.show;
      this.secondtitle = "新增用户";
      this.secondshow = true;
      this.type = 1;
      //        if (this.$refs.employAdd) {
      //          this.$refs.employAdd.initdata()
      //          this.$refs.employAdd.resetFields('form')
      //        }
    },
    hideShow() {
      this.addShow = false;
      this.secondshow = false;
      this.show = false;
      this.currentRow = null;
    },
    postSucess() {
      this.addShow = false;
      this.secondshow = false;
      this.show = false;
      this.currentPage = 1;
      this.success();
      if(this.checkedIdArr.length > 0){
        this.checkedIdArr = [];
      }
    },
    edit() {
      if (this.currentRow == null) {
        this.editdialogVisible = !this.editdialogVisible;
        document.documentElement.style.overflow='hidden';
      } else {
        this.addShow = true;
        this.show = true;
        this.secondtitle = "修改用户";
        this.secondshow = true;
        this.type = 2;
      }
    },
    editdown() {
      this.newcolor1 = true;
    },
    editup() {
      this.newcolor1 = false;
    },
    deletedown() {
      this.newcolor2 = true;
    },
    deleteup() {
      this.newcolor2 = false;
    },
    deletedata() {
      if (this.currentRow == null) {
        this.editdialogVisible = !this.editdialogVisible;
        document.documentElement.style.overflow='hidden';
      } else {
        this.dialogVisible = true;
        document.documentElement.style.overflow='hidden';
      }
    },
    viewdetail(val) {
      this.detaildata = val;
      this.addShow = !this.addShow;
      this.show = true;
      this.secondtitle = "查看用户";
      this.secondshow = !this.secondshow;
      this.type = 3;
    },
    delPost() {
      axios
        .post(
          this.url + "/sysuser/delUser",
          qs.stringify({
            id: this.currentRow.id
          })
        )
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.dialogVisible = false;
            this.currentPage = 1;
            this.success();
            document.documentElement.style.overflow='auto';
          }
        });
    }
  },
  components: {
    AddUser,
    UserDetail,
    CustEdit
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    },
    filterTeam(val) {
      this.$refs.tree3.filter(val);
    },
    searchword: function(newValue) {
      if (newValue == "") {
        this.currentPage = 1;
        this.success();
      }
    }
  }
};
</script>
<style scoped>
.title {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.cust {
  min-height: 700px;
  background-color: #fff;
}

.tabletitle {
  margin-left: 20px;
  height: 50px;
  line-height: 50px;
}

.tree {
  width: 272px;
  background-color: #f4f7f9;
  min-height: 600px;
  /*margin-left: 20px;*/
}

.tree .el-tree {
  width: 200px;
  background-color: #f4f7f9;
  margin: 0 auto;
  margin-top: 18px;
}

.pager {
  margin-top: 20px;
}

.pager {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}

.el-pagination {
  margin-left: 50%;
  transform: translateX(-50%);
}

.active {
  background: linear-gradient(to bottom, #595dff 0%, #7073ff 100%);
}

.active1 {
  background: linear-gradient(to bottom, #1cf1e3 0%, #379b94 100%);
}

.active2 {
  background: linear-gradient(to bottom, #5a7cae 0%, #4e87dc 100%);
}
.textactive {
  color: #1099ff;
}
.add {
  width: 65px;
  height: 28px;
  padding: 7px 15px !important;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
}
.add:hover {
  color: #fff !important;
}
.edit {
  width: 65px;
  height: 28px;
  padding: 7px 15px !important;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
}
.edit:hover {
  color: #fff !important;
}
.delete {
  width: 65px;
  height: 28px;
  padding: 7px 15px !important;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #2f61ac 0%, #314159 100%);
}
.delete:hover {
  color: #fff !important;
}
.custtable {
  width: 77.1%;
}
@media screen and (min-width: 1200px) and (max-width: 1900px) {
  .custtable {
    width: 77.1%;
  }
}

@media only screen and (min-width: 1920px) {
  .custtable {
    width: 83.9%;
  }
}
.el-switch{
  font-size: 15px;
}
</style>
